<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore, useDeviceStore } from '@/stores'
import { bindDeviceApi } from '@/services/my'
//import { getDeviceInfoApi } from '@/services/index'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
const show = ref(false)
const showpopup = () => {
  console.log(memberStore.profile + '用户信息')
  if (!memberStore.profile) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  show.value = true
}
const closepopup = () => {
  show.value = false
}
//查看设备列表
const viewdevice = () => {
  if (!memberStore.profile) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  // console.log(deviceStore.deviceList)
  if (!deviceStore.deviceList || deviceStore.deviceList.length === 0) {
    uni.showToast({
      title: '暂无设备，请先绑定设备',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  uni.navigateTo({ 
    url: '/pagesDevice/equipment/equipment',
  })
}
//蓝牙连接
const deviceNum = ref('')
onLoad(() => {
  console.log(deviceStore.devicedetail?.deviceNum)
  if (deviceStore.devicedetail) {
    deviceNum.value = deviceStore.devicedetail.deviceNum
  }
})

//绑定设备
const binddevice = async (deviceNum: string) => {
  const mes = await bindDeviceApi({
    bindFlg: 1,
    deviceNum,
    userId: memberStore.profile!.id,
  })
  console.log(mes)
  if (mes.msg === '对象正常') {
    closepopup()
    uni.showToast({
      title: '绑定成功',
      icon: 'none',
      duration: 3000,
    })
    //修改store中的设备列表
    await deviceStore.getDeviceList()
    //请求设备实时数据
    await deviceStore.getDeviceData()
  } else {
    uni.showToast({
      title: '绑定失败',
      icon: 'none',
      duration: 1000,
    })
  }
}

//扫描二维码
const qrconntion = () => {
  uni.scanCode({
    success: (res) => {
      console.log(res)
      deviceNum.value = JSON.parse(res.result).deviceNum
      console.log(JSON.parse(res.result))
      binddevice(deviceNum.value)
    },
    fail: (fail) => {
      uni.showToast({
        title: '扫描失败,请重试',
        icon: 'none',
        duration: 1000,
      })
      console.log(fail)
    },
  })
}

//退出登录
const logout = () => {
  uni.showModal({
    title: '温馨提示',
    content: '确定要退出登录吗？',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if(confirm){
        sure()
      }uni.showModal
    }
  })
}
const sure = () => {
  memberStore.clearProfile()
  deviceStore.clearDeviceData()
  deviceStore.clearDeviceList()
}
//跳转蓝牙设备列表页
const draw = () => {
  uni.navigateTo({
    url: '/pagesDevice/bt-device-list/bt-device-list?type=bind',
  })
  closepopup()
}

//登录
const login = () => {
  if (memberStore.profile) {
    uni.showToast({
      title: '您已登录',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
//修改资料
const editprofile = () => {
  if (!memberStore.profile) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  uni.navigateTo({
    url: '/pages/edit-profile/edit-profile',
  })
}
</script>

<template>
  <view class="viewport">
    <view class="user">
      <up-avatar :src="memberStore.profile?.picture" size="74" @click="login"></up-avatar>
      <view class="edit">
        <view class="nickname">{{
          memberStore.profile?.nickname ? memberStore.profile?.nickname : '微信用户'
        }}</view>
        <view class="editprofile" @click="editprofile">
          {{ '修改资料' }} <img src="@/static/right-arrow.svg" class="right-arrow" />
        </view>
      </view>
      <u-button type="primary" shape="circle" @click="showpopup">绑定设备</u-button>
    </view>
    <view class="setting-box">
      <u-cell-group>
        <u-cell title="微信登录" isLink @click="login"></u-cell>
        <u-cell title="我的设备" isLink @click="viewdevice"></u-cell>
        <u-cell title="退出登录" isLink @click="logout"></u-cell>
      </u-cell-group>
    </view>
    <!-- 因为modal外壳也是u-popup__content，为了防止干扰modal的样式在popup外面再套一层 -->
    <view class="popup">
      <u-popup :show="show" mode="center" @close="closepopup" class="frist">
        <view class="select">选择绑定方式</view>
        <view class="method-box">
          <u-cell-group :border="false">
            <u-cell title="蓝牙连接" isLink @click="draw">
              <template #icon>
                <img src="@/static/bluetooth-icon.svg" class="bluetooth" />
              </template>
            </u-cell>
            <u-cell title="扫描二维码" isLink :border="false" @click="qrconntion">
              <template #icon>
                <img src="@/static/qr-icon.svg" class="qr" />
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </u-popup>
    </view>
<!-- 用showModal更方便 -->
    <!-- <u-modal
      :show="islogout"
      :content="content"
      :closeOnClickOverlay="true"
      @confirm="sure"
      @cancel="islogout = false"
      showCancelButton
      @close="islogout = false"
    ></u-modal> -->
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;
  .viewport {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(@/static/starry.jpg) no-repeat;
    background-size: contain;
    .user {
      display: flex;
      margin-top: 269.231rpx;
      height: 144.231rpx;
      .u-avatar {
        margin-left: 42.308rpx;
      }
      .edit {
        margin-left: 28.846rpx;
        font-family: PingFangSC-light;
        .nickname {
          font-size: 38.462rpx;
          width: 230.769rpx;
          margin-top: 36.538rpx;
          color: #ffff;
        }
        .editprofile {
          display: flex;
          margin-top: 19.231rpx;
          font-size: 26.923rpx;
          .right-arrow {
            width: 26.923rpx;
            height: 26.923rpx;
            margin: auto 9.615rpx;
          }
        }
      }
      .u-button {
        width: 180.769rpx;
        height: 53.846rpx;
        line-height: 50rpx;
        background-color: #ffff;
        color: #3780a6;
        font-weight: 600;
        margin-top: 36.538rpx;
        margin-left: 57.692rpx;
      }
    }
    .setting-box {
      width: 100%;
      margin-top: 65.385rpx;
      padding: 0 23.077rpx 0 30.769rpx;
      box-sizing: border-box;
    }
    .popup {
      .u-popup__content {
        width: 576.923rpx;
        height: 421.154rpx;
        .select {
          margin-left: 36.538rpx;
          margin-top: 25rpx;
          width: 207.692rpx;
          height: 48.077rpx;
          line-height: 48.077rpx;
          color: rgba(0, 0, 0, 1);
          font-size: 34.615rpx;
        }
        .method-box {
          margin: 38.462rpx 46.154rpx 0;
          .u-cell__body {
            padding-top: 38.462rpx;
            padding-bottom: 38.462rpx;
          }
          .u-line {
            border-color: #c3c3c3 !important ;
          }
          .bluetooth,
          .qr {
            width: 46.154rpx;
            height: 46.154rpx;
            margin-right: 26.923rpx !important;
          }
        }
      }
    }
  }
  .u-modal {
    width: 100% !important;
    height: 100% !important;
    .u-modal__content {
      text-align: center !important;
    }
  }
}
</style>
